<template>
    <div class="user-management"> <!-- 使用相同的class名称保持样式一致 -->
      <div class="admin-page-header">
        <h2><i class="fas fa-file-alt"></i> 文章管理</h2>
        <router-link to="/admin/articles/create" class="btn btn-primary">
          <i class="fas fa-plus"></i> 新建文章
        </router-link>
      </div>
      
      <div class="admin-table-container">
        <table class="admin-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th>发布时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="article in articles" :key="article.id">
              <td>{{ article.id }}</td>
              <td>{{ article.title }}</td>
              <td>{{ article.author_name }}</td>
              <td>{{ article.category }}</td>
              <td>{{ formatDate(article.publish_time) }}</td>
              <td>
                <span :class="['status-badge', article.status]">
                  {{ articleStatusMap[article.is_published] }}
                </span>
              </td>
              <td>
                <button class="btn btn-sm btn-edit" @click="editArticle(article.id)">
                  <i class="fas fa-edit"></i> 编辑
                </button>
                <button class="btn btn-sm btn-danger" @click="confirmDelete(article.id)">
                  <i class="fas fa-trash"></i> 删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="loading" class="loading-overlay">
          <i class="fas fa-spinner fa-spin"></i> 加载中...
        </div>
        
        <div v-if="!loading && articles.length === 0" class="empty-message">
          <i class="fas fa-inbox"></i>
          <p>暂无文章数据</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { articleApi } from '@/api/api'
  
  const router = useRouter()
  const articles = ref([])
  const loading = ref(false)
  
  const articleStatusMap = {
    published: '已发布',
    draft: '草稿',
    archived: '已归档'
  }
  
  // 获取文章列表
  const fetchArticles = async () => {
    try {
      loading.value = true
      const response = await articleApi.getArticleList()
      articles.value = response || []
    } catch (error) {
      console.error('获取文章列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  
  // 格式化日期
  const formatDate = (dateString) => {
    if (!dateString) return '-'
    return new Date(dateString).toLocaleString()
  }
  
  // 编辑文章
  const editArticle = (id) => {
    router.push(`/admin/articles/edit/${id}`)
  }
  
  // 删除文章确认
  const confirmDelete = (id) => {
    if (confirm('确定要删除这篇文章吗？')) {
      deleteArticle(id)
    }
  }
  
  // 删除文章
  const deleteArticle = async (id) => {
    try {
      await articleApi.deleteArticle(id)
      fetchArticles()
    } catch (error) {
      console.error('删除文章失败:', error)
    }
  }
  
  onMounted(() => {
    fetchArticles()
  })
  </script>
  
  <style scoped>
  /* 完全复用用户管理的样式，无需额外修改 */
  .user-management {
    padding: 20px;
  }
  
  .admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .admin-page-header h2 {
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .admin-table-container {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 200px;
  }
  
  .admin-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .admin-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
  }
  
  .admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .admin-table tr:hover {
    background-color: #f5f7fa;
  }
  
  .status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .status-badge.published {
    background-color: #e6f7ee;
    color: #28a745;
  }
  
  .status-badge.draft {
    background-color: #fff3cd;
    color: #856404;
  }
  
  .status-badge.archived {
    background-color: #f0f0f0;
    color: #6c757d;
  }
  
  .btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
  }
  
  .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .btn-primary {
    background-color: #3498db;
    color: white;
  }
  
  .btn-primary:hover {
    background-color: #2980b9;
  }
  
  .btn-edit {
    background-color: #f8f9fa;
    color: #495057;
    margin-right: 5px;
  }
  
  .btn-edit:hover {
    background-color: #e9ecef;
  }
  
  .btn-danger {
    background-color: #fef0f0;
    color: #dc3545;
  }
  
  .btn-danger:hover {
    background-color: #fde8e8;
  }
  
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 10;
  }
  
  .empty-message {
    padding: 40px;
    text-align: center;
    color: #7f8c8d;
  }
  
  .empty-message i {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.5;
  }
  </style>